<script setup>
import { ref } from 'vue'
import TableComponent from '@/components/TableComponent.vue'

let tabIndex = 0
const editableTabsValue = ref('1')
const editableTabs = ref([])

const addTab = (targetName) => {
  const newTabName = `${++tabIndex}`
  editableTabs.value.push({
    title: '开单模板',
    name: newTabName,
  })
  editableTabsValue.value = newTabName
}
// 移除选项卡
const removeTab = (targetName) => {
  const tabs = editableTabs.value
  let activeName = editableTabsValue.value
  if (activeName === targetName) {
    tabs.forEach((tab, index) => {
      if (tab.name === targetName) {
        const nextTab = tabs[index + 1] || tabs[index - 1]
        if (nextTab) {
          activeName = nextTab.name
        }
      }
    })
  }

  editableTabsValue.value = activeName
  editableTabs.value = tabs.filter((tab) => tab.name !== targetName)
}
</script>

<template>
  <div class="bx header">
    <el-button @click="addTab(editableTabsValue)" type="warning" plain>点我开单</el-button>
  </div>
  <el-tabs v-model="editableTabsValue" type="border-card" closable @tab-remove="removeTab" class="demo-tabs" v-if="editableTabs.length > 0">
    <el-tab-pane v-for="item in editableTabs" :key="item.name" :label="item.title" :name="item.name">
      <TableComponent />
    </el-tab-pane>
  </el-tabs>


</template>

<style scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
div.bx {
  box-shadow: var(--el-box-shadow);
  border-radius: 4px;
  margin-bottom: 15px;
}

.header {
  display: flex;
  height: 45px;
  padding: 10px 10px 0;
  overflow: hidden;
}
</style>